<template>
    <div class="content">
      <item v-for="movie in movies" :movie="movie" :key="movie.id"></item>
      <template v-if="guodu">
        <loading></loading>
      </template>
      <div id="content-footer"></div>
    </div>
</template>

<script>
    import 'assets/style.scss'
    import item from '../Item.vue'
    import loading from '../loading.vue'
    import {getInTheaters, getCommingSoon} from 'src/api/index.js'

    export default {
        components:{
            item,
            loading
        },
        data:function () {
            return {
                movies:[],
                reset: false,
                dropload: null
            }
        },
        props:{
          isShowing: {
              type: Boolean,
              required: true
          }
        },
        watch:{
          isShowing: function () {
              console.log('isShowing is changed....')
              this.reset = true
              this.movies = []
              if(this.dropload) {
                  this.dropload.resetload()
                  this.dropload.noData(false);
              }
          }
        },
        computed: {
            guodu: function(){return this.movies.length === 0; }
        },
        mounted: function () {
            let vm = this;
            vm.dropload = $('#content-footer').dropload({
                scrollArea: window,
                domDown: {
                    domClass: 'dropload-down',
                    domRefresh: '<div class="dropload-refresh">上拉加载更多</div>',
                    domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                    domNoData: '<div class="dropload-noData">已无数据</div>'
                },
                loadDownFn: function (me) {
                    let reset = vm.reset;
                    vm.reset = false;
                    (vm.isShowing ? getInTheaters(reset) : getCommingSoon(reset))
                        .then(function (movies) {
                            if(movies.length > 0) {
                                vm.movies = vm.movies.concat(movies)
                                vm.start += movies.length
                            } else {
                                me.lock();
                                me.noData(true);
                            }
                            me.resetload();
                        })
                        .catch(function (error) {
                            console.log('%c'+error, 'color: red')
                            me.noData(false);
                            me.resetload()
                        })
                }
            })

            vm.dropload.unlock();
            vm.dropload.noData(false);
            vm.dropload.resetload()
        },
        methods: {
        }
    }
</script>

<style lang="scss" scoped="">
  .content{
    padding: 20px 20px 0 20px;
    overflow: scroll;

    background-color: #f8f8f8;
  }

  .border {
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 5;
    width: 50%;
    height: 4px;
    background: #ccc;
    -ms-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: scale(.5);
    transform: scale(.5);
  }
  .pos{
    left: 50%;
  }

  .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
</style>
